@import "../../sassmixins/mixins";

body, html {
  @include square(100%);
  overflow: hidden;
}

body {
  background-image: url("../image/bg.jpg");
  background-size: 100% 100%;
  position: relative;
}

.btn-area {
  position: absolute;
  bottom: px2rem-s(40px);
  height: px2rem-s(68px);
  width: 10rem;

  .upload {
    position: absolute;
    @include size(px2rem-s(165px), px2rem-s(65px));
    background-image: url("../image/reup.png");
    background-size: 100% 100%;
    bottom: 0;
    left: px2rem-s(142px);
  }

  .next {

    position: absolute;
    @include size(px2rem-s(128px), px2rem-s(62px));
    background-image: url("../image/next.png");
    background-size: 100% 100%;
    bottom: 0;
    right: px2rem-s(132px);
  }
}

.up-img {
  position: relative;
  top: px2rem-s(105px);
  @include square(px2rem-s(540px));
  @include center-block;
  background-image: url("../image/example.jpg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.word {
  @include size(px2rem-s(387px), px2rem-s(106px));
  background-image: url("../image/word.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  @include center-block;
  position: absolute;
  top: px2rem-s(670px);
  left: px2rem-s((640px - 387px) / 2);

}



